快捷導(dǎo)航

基于JQuery實(shí)現(xiàn)的Select級(jí)聯(lián)

更新時(shí)間：2014年01月27日 17:43:18 作者：

Select級(jí)聯(lián)，想必大并不陌生吧，本文為大家介紹下使用jquery是如何快速實(shí)現(xiàn)的，希望對(duì)大家有所幫助

 
$(document).ready(function(){ 


$("#precinct").change(function(){ 
$("#ptype").val("");//重置所有 
$("#stype").html(""); 
$("#stype").append("<option value=\"\">--請(qǐng)選擇--</option>"); 
}); 

<span style="white-space:pre"> </span>//監(jiān)聽(tīng)專利類型change事件 
$("#ptype").change(function(){ 
var ptype = $(this); 
var atype = $(this).val();//對(duì)象值 
var pid = $("#precinct").val(); 
if (!ptype.data(atype)) {//從緩存里拿到值得話不需要再和服務(wù)器交互 
$.post("Main/PatentSubsidy/getSubsidy",{askfor:atype,precinct:pid},function(json){//返回json對(duì)象 
$("#stype").html("");//清空<span style="font-family: Arial, Helvetica, sans-serif;">#stype</span>下拉框 
for(var i=0;i<json.length;i++){ 
//添加一個(gè) 
$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>"); 
}; 
ptype.data(atype, json); //以#ptype的值為key加入到緩存 
},'json'); 
}else{ 
var json = ptype.data(atype);//取緩存 
$("#stype").html(""); 
for(var i=0;i<json.length;i++){ 
//添加一個(gè) 
$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>"); 
}; 
} 
}); 

}); 

根據(jù)#precinct和#ptype取得#stype

action method

復(fù)制代碼代碼如下:

 
public void getSubsidy(){ 
String askfor=null,precinct=null; 
if(null!=getPara("askfor")&&!"".equals(getPara("askfor"))){ 
askfor=getPara("askfor"); 
if(null!=getPara("precinct")&&!"".equals(getPara("precinct"))){ 
precinct=getPara("precinct"); 
} 
}else{ 
renderJson("[{\"id\":\"\",\"value\":\"--請(qǐng)選擇--\"}]");//傳空值，返回 
} 
String sql = "select s.id, s.subsidy_type, p.name from org_subsidy_flow s, tab_precinct p where s.enabled = 'true' and p.status = '1' and s.patent_type = '" + askfor + "' and s.precinct = p.id"; 
if(null!=precinct&&!"".equals(precinct)){ 
sql += " and p.id = "+precinct; 
} 
sql += " order by p.id, s.id"; 
List<Org_subsidy_flow> sf = Org_subsidy_flow.dao.find(sql); 
if(sf.size()!=0){ 
StringBuffer buffer = new StringBuffer(); 
for(int i=0;i<sf.size();i++){ 
buffer.append("{\"id\" : \""+sf.get(i).getInt("id")+"\" , \"value\" : \""+sf.get(i).getStr("subsidy_type")+" -- "+sf.get(i).getStr("name")+"\"},"); 
} 
if(buffer.length()!=0){ 
renderJson("["+buffer.substring(0, buffer.length()-1).toString()+"]"); 
} 
}else{ 
renderJson("[{\"id\":\"\",\"value\":\"--請(qǐng)選擇--\"}]"); 
} 
} 

您可能感興趣的文章:

Select級(jí)聯(lián)

相關(guān)文章

jquery判斷至少有一個(gè)checkbox被選中的方法
這篇文章主要介紹了jquery判斷至少有一個(gè)checkbox被選中的方法,涉及jQuery操作checkbox控件的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JS自動(dòng)縮小超出大小的圖片
在文章的正文中，往往會(huì)出現(xiàn)一些超大的圖片，把頁(yè)面撐開(kāi)變形，影響了美觀。用這段JS代碼就可解決這個(gè)問(wèn)題，你可以把圖片的最大值限定在一定范圍內(nèi)，當(dāng)圖片大小超出這個(gè)尺寸后，就會(huì)被自動(dòng)按比例縮小
2012-10-10
jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-10-10
2014年50個(gè)程序員最適用的免費(fèi)JQuery插件
這篇文章主要介紹了2014年50個(gè)程序員最適用的免費(fèi)JQuery插件,需要的朋友可以參考下
2014-12-12
jquery中加載圖片自適應(yīng)大小主要實(shí)現(xiàn)代碼
當(dāng)圖片較小時(shí)顯示實(shí)際大小，當(dāng)圖片超過(guò)div 大小時(shí)圖片自動(dòng)適應(yīng)div的大小，下面有個(gè)示例，大家可以參考下，希望對(duì)大家有所幫助
2013-08-08
jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果的方法,以完整實(shí)例形式分析了jQuery插件jquery-1.2.6.pack.js實(shí)現(xiàn)文字提示效果的相關(guān)技巧,并提供了jquery-1.2.6.pack.js的本站下載地址,需要的朋友可以參考下
2015-12-12
jQuery中element選擇器用法實(shí)例
這篇文章主要介紹了jQuery中element選擇器用法,實(shí)例分析了element選擇器的功能、定義及相關(guān)的操作技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jquery鍵盤事件介紹
jquery鍵盤事件介紹，使用jquery的朋友可以參考下。
2011-01-01
淺談jQuery中ajaxPrefilter的應(yīng)用
下面小編就為大家?guī)?lái)一篇淺談jQuery中ajaxPrefilter的應(yīng)用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08